<template>
  <div class="sign-wrap">
    <div class="boardBox">
      <canvas
        id="canvas"
        :width="state.cWidth"
        :height="state.cHeight"
        @mousedown="onMouseDown"
        @mousemove="onMouseMove"
        @mouseup="onMouseUp"
        @mouseleave="onMouseLeave"
        ref="canvasRef"
      >抱歉，您的浏览器暂不支持canvas元素
      </canvas>
    </div>
    <div class="footer-bar">
      <div class="reset">清空</div>
      <div class="use">保存</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
const canvasRef = ref<HTMLCanvasElement>();
const state = reactive({
	cWidth: '100%',
	cHeight: 500,
	point: {
		x: 0,
		y: 0,
	},
	moving: false,
});
const ctx = ref<CanvasRenderingContext2D | null>();
onMounted(() => {
	ctx.value = canvasRef.value?.getContext('2d');
	ctx.value!.strokeStyle = '#000';
});
const onMouseUp = () => {
  state.moving=false
};
const onMouseLeave = () => {
  state.moving=false
};
const onMouseDown = (e) => {
	console.log(e);
	// let x = e.touches[0].clientX,
	// 	y = e.touches[0].clientY; // 获取触摸点在画板（canvas）的坐标
	// state.point.x = x;
	// state.point.y = y;
	// ctx.beginPath(); // 开始绘制
	// ctx.lineWidth = 7; // 设置线条宽度
	const x = e.clientX - e.target.offsetLeft + document.documentElement.scrollLeft;
	const y = e.clientY - e.target.offsetTop + document.documentElement.scrollTop;
	ctx.value?.beginPath();
	ctx.value?.moveTo(x, y);
	state.moving = true;
};
const onMouseMove = (e) => {
	if (state.moving) {
		const t = e.target;
		const x = e.clientX;
		const y = e.clientY;
		ctx.value?.lineTo(x, y);
		ctx.value?.stroke();
	}
};
</script>

<style scoped lang="scss">
.sign-wrap{
  width: 100%;
  height: auto;
  border: 1px solid #666666;
}
</style>
